#vuex

***mapGetters和getters

#截取后端数据

#文字对齐

#文本溢出省略

  1. 文本溢出设置为省略一

  1. 文本溢出设置为省略二(多行)

  1. 文本溢出设置为省略三

#图片回显

file为二进制文件

#路径引用

****同一个文件夹中,

  1. 只要当其中一个组件直接属于该文件夹,跳一级,用 ./ 【图1】【图2】
  2. 当两个组件都分别属于各自的文件夹,共同属于某个总的文件,跳两级,用../ 【图3】

****不同文件夹且关系远,从同级文件夹名称开始写,用 @/ 【图4】

#类选择实现交互动效

#柱状图表数据排序

控制台获取的数据,console.log(this.totalData),重新设置了数据属性。

#echarts的使用

  1. 常用引用方式

在接口中调取echarts方法,在方法中引入时:

this.addChart = $echarts.init(this.$refs.addChart); //addChart为图表元素id this.addChart.setOption({});

  1. 基础echarts引用方法:

直接在接口中引入echarts时:

const myChart = echarts.init(document.getElementById(“oneone”)); //oneone为图表元素id

const option = {};

#POST请求的格式(特殊:与GET类似)

#values报错

当出现以上情况,

  1. 可能是数据与表现形式不一致,比如数据显示在选择框中,但选择框无数据。
  2. 可能是v-model命名出问题,不能这样命名,后端接口获取的值不能直接赋予进入,需要再转换以下。 a.正常命名

b.异常命名

#表格中添加选择框编辑

~1.这是加载页面时初始化设置想要的数据格式,定义authOptons数组,用到表格render中赋值。方便传 递数据给后端时数据信息整理,容易拿去数据,便于转化为后端想要的数据格式。

~2. 这 是 选 择 框 中 的 下 拉 选 择 项 , 在 data() 中 进 行 设 置 , 定 义 typeAuthOptionsMap 对 象 。

~3.根据表格中表头type,选择框中显示不同的选择项,一共有三组选择项,与type一一对应。

~4.render函数:在表格中创建选择框编辑功能

~5.传递给后端的数据格式,新定义一个对象。

#对象与对象数组拼接组合

新定义的对象数组与原始数据组合在一起

#forEach和push

  1. 使用forEach遍历数组对象
  2. 将遍历的数组中的需要是数据提取出来,重新生成一个数组用push
  3. 可单独提取数据信息

  1. 也可以重新定义一个对象数组

#map的使用

重新定义一个对象数组

#数据排序:降序或者升序

#同行多个元素中部分右对齐

#隐藏表格某列

~例子:隐藏勾选项

filter意为过滤,过滤某一列数据。

显示表格选择项不同状态

#分支合并,git提交到主分支上

#拖拽

#表格中标签

#模糊查询

remoteTableHb (query) {

// const [url, httpConfig] = [

// “/api/freeIPA/getHbaseProjectInfo”,

// {

// params: {

// table: query,

// },

// },

// ];

const [url, httpConfig] = [

  • “/api/freeIPA/dataProjectList”,
  • {
  • params: {
  • name: query,
  • type: ‘’,
  • // page: this.currentPageNum,
  • // size: this.pageSize,
  • },
  • },

];

*this*.$http.get(url, httpConfig).then((response) => {

  • if (response.data.code === 200) {
  • console.log(response)
  • *this*.list = response.data.result;
  • }

});

  • if (query !== ‘’) {
  • *this*.loadingTableHb = true;
  • setTimeout(() => {
  • *this*.loadingTableHb = false;
  • // const list = this.list.map(item => {
  • // return {
  • // value: item,
  • // label: item
  • // };
  • // });
  • const list = *this*.list.map(item => {

return {

value: item.name,

label: item.name

};

});

*this*.optionsTableHb = list

// this.optionsTableHb = list.filter(item => {

// console.log(‘显示’)

// console.log(item)

// item.label.toLowerCase().indexOf(query.toLowerCase()) > -1

// });

// console.log(this.optionsTableHb)

}, 200);

  • } else {

*this*.optionsTableHb = [];

  • }

},

remoteTableHb (query) {

const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,

{

params: { name: query, type: ‘’,

},

},

];

this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {

console.log(response)

this.listTableHb = response.data.result;

}

});

if (query !== ‘’) { this.loadingTableHb = true; setTimeout(() => {

this.loadingTableHb = false;

const list = this.listTableHb.map(item => { return {

value: item.name, label: item.name

};

});

this.optionsTableHb = list

}, 200);

} else {

this.optionsTableHb = [];

}

},

remoteColumnHb (query) {

const table = this.list.table.toString() console.log(table)

const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,

{

params: { name: table, type: query,

},

},

];

this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {

console.log(response)

this.listColumnHb = response.data.result;

}

});

if (query !== ‘’) { this.loadingColumnHb = true; setTimeout(() => {

this.loadingColumnHb = false;

const list = this.listColumnHb.map(item => { return {

value: item.name, label: item.name

};

});

this.optionsColumnHb = list

}, 200);

} else {

this.optionsColumnHb = [];

}

},

#url路径直接跳转页面

  1. 初始化页面时,弹窗是没有参数的,此时需要自己定义弹窗的参数名。

在打开弹窗时定义参数。此时浏览器上会出现:

  1. 要直接从浏览器中输入url路径跳转,则需要在弹窗所在的vue页面初始化加载时判断设置。

  1. 如果要关闭弹窗,我则需要删除掉该参数,回到原来的大页面中,则需要在关闭弹窗时,重新设置 route中query的值。

#时间格式处理

// T和Z时间格式转换changeDate(oldDate) {

if(oldDate){

var dateee = new Date(oldDate).toJSON()

var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ‘ ‘).replace(/\.[\d]{3}Z/, ‘’)

return oldDate == ‘’ ? ‘’ : date

}

}

由A格式转为B格式

#render中自定义样式

#伪类:

排除掉scoped局部对全局的影响(子组件)。或者说时组件自带的类名的影响。用v-deep

学习链接是:深度作用选择器也可以用 /deep/.

~echarts相关

#echarts基本静态与动态图形显示

静态

  1. 在页面容器中写入,设置id

  1. 可能会在页面的script中引入特殊组件,引入特殊组件时,要npm i该组件。一般会在main.js中全局引入

  1. 在页面方法中引入,后写好图表的option,再setOption

或者直接在setOption中写

动态获取echarts

option写在data中,调取数据时只赋需要的数据给option

#echarts中X轴刻度对齐

#echarts页面初始化时图形变形解决方式

方法:异步请求,等原生echarts组件加载后,在异步请求方法,就避免了变形。

#echarts图形悬浮框定义

#echarts中设置X轴平行线为虚线,X轴样式也被覆盖解决方式

#echarts中柱状图颜色形状设置(左上右下)

#调整图表大小

~数据处理

#短横线转为驼峰

#删除对象中名称有短横线的数据

#对象转为自定义数组

#对象转为自定义对象

#屏幕自适应

echarts中pie图引导线为labelline

#设置滚动条

#开源依赖版本问题

-——-TypeError: Object(…) is not a function” found in

-———–报错中字段提示都是依赖包中字段,如clientHeight为开源代码中字段

重新安装对应版本

-–删除当前依赖

npm uninstall 安装包 (如:npm uninstall element-ui )

-—下载指定版本

npm install –save 包名称@版本号 (如: npm install –save element-ui@2.15.8